<template>
  <div class="detail_page">
    <!-- 导航 开始 -->
    <nav-bar title="材料详情"></nav-bar>
    <!-- 导航 end -->

    <!-- 头部 开始 -->
    <div class="banner"></div>
    <!-- 头部 end -->

    <!-- 材料信息 开始 -->
    <div class="material_info">
      <div class="left">
        <!-- 材料名称 开始 -->
        <div class="head">
          {{ oInfo.materialName }}
        </div>
        <!-- 材料名称 end -->

        <!-- 地址 开始 -->
        <div class="sub_tips">
          <span>产地：{{ oInfo.materialOriginPlace }}</span>
        </div>
        <div class="address">
          <span>所属公司：{{ oInfo.belongCompany }}</span>
        </div>
        <div class="address">
          <span>简介：{{ oInfo.productIntroduce }}</span>
        </div>
        <!-- 地址 end -->
      </div>

      <!-- 材料头像 开始 -->
      <div class="avatar">
        <li-image
          :src="oInfo.brandLogo"
          class="img"
          round
          v-if="oInfo.brandLogo"
        ></li-image>
        <img
          src="@/assets/images/inquire/avatar2.png"
          class="img"
          alt=""
          v-else
        />
      </div>
      <!-- 材料头像 end -->
    </div>
    <!-- 材料信息 end -->

    <!-- 发展历程 开始 -->
    <div class="sigle_box">
      <h2 class="h2_title">发展历程</h2>
      <div class="content">
        <div class="timeline">
          <div
            class="time_cell"
            v-for="(item, index) in oInfo.developmentHistory || []"
            :key="index"
          >
            <div class="name">{{ item.year || "" }}年：</div>
            <div class="txt">{{ item.history }}</div>
          </div>
          <!-- <div class="time_cell">
                        <div class="name">1995年：</div>
                        <div class="txt">开发植体并取得许可证</div>
                    </div>
                    <div class="time_cell">
                        <div class="name">1997年1月：</div>
                        <div class="txt">正式于韩国首尔成立了OSSTEM IMPLANT Co.,Ltd.</div>
                    </div>
                    <div class="time_cell">
                        <div class="name">1999年10月：</div>
                        <div class="txt">获取ISO 9001认证</div>
                    </div>
                    <div class="time_cell">
                        <div class="name">2001年1月：</div>
                        <div class="txt">获得CE 0434 认证</div>
                    </div>
                    <div class="time_cell">
                        <div class="name">2001年3月：</div>
                        <div class="txt">成立AIC植牙研究及教育中心(Apsun Dental ImplantResearch & amp;Education Center)</div>
                    </div>
                    <div class="time_cell">
                        <div class="name">2002年1月：</div>
                        <div class="txt">设立OSSTEM植体研发中心(OSSTEM Implant Research & amp;Education Center)</div>
                    </div> -->
        </div>
      </div>
    </div>
    <!-- 发展历程 end -->

    <!-- 产品型号 开始 -->
    <div class="sigle_box">
      <h2 class="h2_title">产品型号</h2>
      <div class="content">
        <div class="material_list">
          <div
            class="material_box"
            v-for="(item, index) in oInfo.productModelInfoList || []"
            :key="index"
          >
            <div class="avatar">
              <li-image
                :src="item.modelLogo"
                round
                class="img"
                v-if="item.modelLogo"
              ></li-image>
              <img
                src="@/assets/images/inquire/avatar2.png"
                class="img"
                alt=""
                v-else
              />
            </div>
            <div class="info">
              <div class="top">
                <span class="name">{{ item.modelName }}</span>
                <!-- <span class="sub">全新应用模式——7+3</span> -->
              </div>
              <div class="price">
                <span>参考价</span>
                <span class="unit">￥</span>
                <span class="num">{{ item.referencePrice }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 产品型号 end -->

    <!-- 更多信息 开始 -->
    <div class="sigle_box">
      <div class="h2_title">更多信息</div>
      <div class="content" v-html="oInfo.detailIntroduce"></div>
    </div>
    <!-- 更多信息 end -->
  </div>
</template>
<script>
import { Cell, CellGroup } from "vant";
import { GET_QUALIFICATION_MATERIAL_INFO } from "@/http/interface";
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  data() {
    return {
      oInfo: {},
      title: "",
      description: "",
      keywords: "",
      materialId: "",
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
      ],
      link: [
        {
          ref: "canonical",
          href: `${this.$domain}/inquire/material/${this.materialId}`,
        },
      ],
    };
  },
  async asyncData({ query, $axios, params }) {
    let res = await $axios.get(GET_QUALIFICATION_MATERIAL_INFO, {
      params: { id: params.id },
    });
    let oInfo = res.data || {};
    return {
      oInfo,
      title: oInfo.seoTitle,
      keywords: oInfo.seoKeywords,
      description: oInfo.seoDescription,
      materialId: params.id,
    };
  },
  methods: {
    // 格式化年份
    showYear(str) {
      if (!str) {
        return "";
      }
      let arr = str.split("，");
      return arr[0];
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/inquire/material.less";
</style>